BOOTSTRAP知识点汇总
一：CSS样式
栅格系统
排版
代码
表格
表单
按钮
图片
辅助类
响应式工具

二：CSS组件
glyphicons图标
下拉菜单
按钮组
输入框组
导航
导航条
路径导航
分页
标签
徽章
巨幕
页头
缩略图
警告框
进度条
媒体对象
列表组
面板
响应式嵌入内容
well


三：JS插件
模态框
下拉菜单
滚动监听
标签页
工具提示
弹出框
警告框
按钮
折叠效果
幻灯片效果
固定侧边栏


1.BootStrap安装
2.BootStrap全局CSS样式
3.BootStrap CSS组件
4.BootStrap JS插件


1.bootstrap安装
	<script type="text/javascript" src="./dist/jquery-3.2.1.js"></script>
	<script type="text/javascript" src="./dist/js/bootstrap.js"></script>
	<link rel="stylesheet" type="text/css" href="./dist/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="./font/iconfont.css">
2.html文档类
<!DOCTYPE html>
3.探测移动设备的真实宽度
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
4.<div class="container">这里面可写内容</div>
5.栅格系统写法	<div class="row">
		<div class='col-md-4 col-md-offset-4' >
			<img src="logo.jpg" width='100%'>
		</div>
		<div class='col-md-4'>
		<div class='col-md-3'>
			<img src="logo.jpg" width='100%'>
		</div>
		<div class='col-md-3'>
			<img src="logo.jpg" width='100%'>
		</div>	
		<div class='col-md-3'>
			<img src="logo.jpg" width='100%'>
		</div>	
		<div class='col-md-3'>
			<img src="logo.jpg" width='100%'>
		</div>
		</div>			
	</div>
</div>
.row一行十二列
.col-md-3占一行的三列，可以放四个，也就是总数是十二列


一：排版
1.标题  .page-header
2.段落  .lead
3.标记  mark
4.删除线 del
5.small小号字体
6.文本对齐
	<p class='text-left'>左对齐</p>
	<p class="text-right">右对齐</p>
	<p class='text-justify'>居中</p>
	<p class='text-center'>两端对齐</p>
7.文本大小写
text-lowercase text-uppercase
8.无样式列表
<ul class='list-unstyled'><li></li></ul>
9.内联列表
10.自定义列表
<dl><dt><dd></dd></dt></dl>
11.水平排列列表
<dl class='dl-horizontal'><dt><dd></dd></dt></dl>
12.代码
code 给字体加背景颜色
pre  按照原格式输出
kbd 给字体加背景颜色
var 斜体
二：表格
table-striped 条纹
table-bordered 边框
table-hover 鼠标移动背景色加深
table-responsive 响应式表格
table-condensed  当屏幕变小时，表格相应缩小
状态类：
.active
.success
.info
.warning
.danger
响应式表格
<div class=' table-responsive'>
	<table class='table'></table>
</div>

三：按钮(.btn)
颜色
.btn
.btn-default
.btn-primary
.btn-warning
.btn-danger
.btn-info
.btn-link
大小
.btn-lg
.btn默认大小
.btn-sm
.btn-xs
.btn-block独占一行

禁用按钮（是属性不是类）
disabled


四：图片
.img-rounded
.img-circle
.img-thumbnail

五：辅助类
1.文本颜色
.text-muted
.text-warning
.text-danger
.text-primary
.text-info
.text-success

2.文本背景色
.bg-muted
.bg-warning
.bg-danger
.bg-primary
.bg-info
.bg-success
3.叉号关闭
	<span class='close'>&times;</span>
4.下三角	
	<span class='caret'></span>下三角
5.浮动
.pull-right
.pull-left
	<div class="clearfix">清除浮动</div>
6.居中
.center-block 让块标签居中
7.（类：显示和隐藏）
.show
.hide


8.响应式工具
table-responsive
img-responsive



组件
glyphicons图标
字符图标
glyphicons-triangle-right

下拉菜单
.dropdown
.dropup
.dropdown-menu
[data-toggle='dropdown']
.dropdown-menu-right
.dropdown-menu-left
.dropdown-header
.divider
.disabled

按钮组
<div class="btn-toolbar">
	<div class="btn-group btn-group-lg">
		<div class="btn">
			
		</div>
	</div>
</div>


嵌套式按钮组
.dropdown-toggle
垂直按钮组
.btn-group-vertical
两端对齐式的按钮
.btn-group-justified
内联表单
.form-inline

.input-lg
.input-sm
.help-block 默认

输入框组
.input-group
input-group-addon
input-group-lg
input-group-sm
.input-group-btn


导航
.nav
.nav-tabs
.nav nav-pills
.nav-stacked

button.btn btn-danger navbar-btn
<p class='navbar-text'>linux <a href="" class='navbar-link'>dddd</a></p>

路径导航
.breadcrumb
分页效果
.pagination
上下页
.pager
标签
.label
缩略图
.thumbnail
警告框
.alert
.alert-success
.alert-info
.alert-warning
.alert-danger
媒体对象
.media
.media-left
.media-right
.media-body
.media-heading
.media-middle|top|bottom
列表组
.list-group
.list-group-item
面板
.panel
.panel-danger
.panel-heading
.panel-title
.panel-body
.panel-footer
内嵌框架
.embed-responsive
.embed-responsive-16by9
.embed-responsive-4by3
.embed-responsive-item

well
.well
.well-lg
.well-sm

bs jquery插件
弹框
.modal
.modal-dialog
.modal-lg
.modal-sm
.modal-content
.modal-header
.modal-body
.modal-footer


滚动监听
data-spy='scroll'
data-target='#mynav'
data-offset='150'

自定义滚动监听

标签页
[data-toggle='tab']

.tab-content
.tab-pane
.active
.fade in

折叠效果
<div class="panel panel-primary">
	<div class="panel-heading">
		<div class="panel-title"> <a href="#one" data-toggle='collapse' data-parent='#accordion'>linux</a></div>
		<div id='one' class="panel-collapse collapse">
			<div class="panel-body">linux is very much linux is very much linux is very much linux is very much linux is very much linux is very much linux is very much linux is very much linux is very much linux is very much linux is very much linux is very much</div>
		</div>
	</div>
</div>


幻灯片实例


affix固定










